1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import styles from "./info.module.css";
import Image from "next/image";
import Buttons from "./buttons";
import { redirect } from "next/navigation";
import { FaStar } from "react-icons/fa";
import CurrentReading from "./[read]/currentReading";
export default async function MangaInfo({ params }) {
const id = params.id;
const data = await getMangaInfo(id);
if (data.message) {
redirect("/404");
}
return (
<div className={styles.MangaInfoContainer}>
{data && (
<div className={styles.MangaInfo}>
<div
className={styles.MangaHero}
style={{
backgroundImage: `url(${data.cover})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
borderRadius: 10,
}}
>
<div className={styles.TitleContainer}>
<p
style={{
color: data.color,
borderRadius: 10,
padding: 5,
}}
>
{data.title["romaji"]}
</p>
<Image
src={data.image}
width={200}
height={310}
alt="Manga Poster"
priority
/>
</div>
</div>
<div className={styles.MangaDescription}>
<p>{data.description.split("<br")[0]}</p>
<span className={styles.MangaReleaseYear}>
Released in: {data.releaseDate}
</span>
<span>
Started on: {data.startDate["day"]}-
{data.startDate["month"]}-{data.startDate["year"]}
</span>
<span>
Ended on: {data.endDate["day"]}-
{data.endDate["month"]}-{data.endDate["year"]}
</span>
<p style={{ color: "#7ED7C1" }}>
Genres:
{data.genres &&
data.genres.map((item, index) => (
<span
key={index}
className={styles.MangaGenre}
style={{
color: data.color,
margin: 5,
}}
>
{item}
</span>
))}
</p>
<div className={styles.MangaRatings}>
<span>Ratings: {data.rating / 10}</span>
<span>
<FaStar />
</span>
</div>
</div>
<div className={styles.CharactersContainer}>
<div className={styles.Character}>
{data.characters &&
data.characters.map((item, index) => (
<div
key={index}
className={styles.CharacterEntry}
>
<Image
src={item.image}
width={140}
height={200}
alt="Character Poster"
/>
<p>
{item.name.full} ({item.role})
</p>
</div>
))}
</div>
</div>
<CurrentReading />
<div className={styles.Chapters}>
<p className={styles.ChapterTitle}>
Chapters & Volumes
</p>
<Buttons content={data} />
</div>
</div>
)}
</div>
);
}
async function getMangaInfo(id) {
const res = await fetch(
`https://consumet-api-di2e.onrender.com/meta/anilist-manga/info/${id}?provider=mangadex`,
{ next: { revalidate: 86400 } }
);
const data = await res.json();
return data;
}
|